<template>
  <he-popup mode="bottom" v-model="showModal" :borderRadius="16">
    <view class="detail-shipping-address flex flex-direction" :data-theme="theme">
      <view class="he-header">
        <text class="he-header__title">配送至</text>
        <text class="iconfont iconpopup_close fr" @click="showModal = false"></text>
      </view>
      <view class="he-body flex-sub">
        <scroll-view class="he-body__scroll" scroll-y>
          <view class="he-item flex" v-for="(item, index) in list" :key="index" @click="setSelect(item)">
            <view class="he-item__select flex justify-center align-center">
              <text class="iconfont iconbtn_select" v-if="item.is_select"></text>
            </view>
            <view class="flex-sub flex flex-direction justify-center">
              <view class="he-item__address">
                {{ item.province }}{{ item.city }}{{ item.district }}{{ item.address }}
              </view>
              <view class="he-item__info">{{ item.name }} {{ item.mobile }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="he-footer">
        <button class="cu-btn" @click="newValue = true">选择其他地区</button>
      </view>
    </view>
  </he-popup>
</template>
<script>
import hePopup from '../../../components/he-popup.vue';
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'detail-shipping-address',
  components: {
    hePopup
  },
  props: {
    value: {
      type: Boolean
    },
    select: {
      type: Object,
      default: function () {
        return {
          province: '',
          city: '',
          district: ''
        };
      }
    },
    isAddress: {
      type: Boolean,
      default: function () {
        return false;
      }
    }
  },
  computed: {
    ...mapGetters('user', {
      list: 'getAddress'
    }),
    showModal: {
      get: function ({ value }) {
        return value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    },
    newValue: {
      get: function ({ isAddress }) {
        return isAddress;
      },
      set: function (val) {
        this.showModal = false;
        this.$emit('update:isAddress', val);
      }
    }
  },
  methods: {
    ...mapActions({
      getAddress: 'user/getAddress'
    }),
    setSelect: function (item) {
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].is_select = false;
      }
      item.is_select = true;
      this.$emit('select', item);
      this.showModal = false;
    }
  },
  mounted: function mounted() {
    if (this.isLogin) this.getAddress();
  },
  beforeDestroy() {
    for (let i = 0; i < this.list.length; i++) {
      this.list[i].is_select = false;
    }
  }
};
</script>

<style scoped lang="scss">
.detail-shipping-address {
  height: 63vh;
}

.he-header {
  height: 56px;
  line-height: 56px;
  text-align: center;
  margin-top: 16px;
  padding: 0 32px;
}

.iconpopup_close {
  font-size: 28px;
  width: 28px;
  height: 28px;
  line-height: 1;
  color: #9d9d9d;
  margin-top: 18px;
}

.he-header__title {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

.he-body {
  margin-top: 32px;
  margin-bottom: 32px;
}

.he-body__scroll {
  height: calc(63vh - 256px);
}

.he-footer {
  height: 120px;
  padding: 0 32px;
}

.cu-btn {
  margin: 20px 0;
  height: 80px;
  width: 686px;
  border-width: 1px;
  border-style: solid;
  @include border_color('border_color');
  background: #ffffff;
  border-radius: 40px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  padding: 0;
  @include font_color('font_color');
}

.he-item {
  width: 750px;
  margin-bottom: 36px;
}

.he-item__select {
  width: 97px;
}

.iconbtn_select {
  font-size: 32px;
  @include font_color('font_color');
}

.he-item__address {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding-right: 56px;
}

.he-item__info {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
</style>
